<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="header">
      <view class="profile" v-if="isLogined" @click="toMy">
        <image
          class="avatar"
          :src="
            userInfo.avatar ||
            'https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/default-avatar.png'
          "
        />
        <text class="name">{{ userInfo.nickname || '默认用户' }}</text>
      </view>
      <view class="profile" v-else @click="toLogin">
        <image
          class="avatar"
          src="https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/default-avatar.png"
        />
        <text class="name">前往登录</text>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-bar">
      <image class="search-icon" src="../../static/icons/search.png"></image>
      <input class="search-input" placeholder="搜索内容" v-model="searchQuery" />
      <button class="search-button" @click="onSearch">| 搜索</button>
    </view>

    <!-- 快速导航 -->
    <view class="quick-actions">
      <view class="action-item" @click="toDetect">
        <image class="action-icon" src="../../static/icons/camera.png" />
        <view class="action-info">
          <text class="action-label">结核检测</text>
          <text class="action-desc">皮试照片检测</text>
        </view>
      </view>
      <view class="action-item" @click="toDRtect">
        <image class="action-icon" src="../../static/icons/record.png" />
        <view class="action-info">
          <text class="action-label">胸片智检</text>
          <text class="action-desc">DR胸片智能检测</text>
        </view>
      </view>
    </view>

    <!-- 医院信息 Info -->
    <view class="hospital-info">
      <view class="hospital-text">
        <text class="hospital-title">医院介绍</text>
        <text class="hospital-description">
          湖南省肺科医院与湖南省结核病防治所院所一家，始建于1950年，属省卫健委直属公共卫生事业单位
        </text>
      </view>
      <image
        class="hospital-image"
        src="https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/hospital.png"
      />
    </view>

    <!-- 调查问卷 -->
    <view class="survey-section" @click="toQuestionnaire">
      <image class="survey-icon" src="../../static/icons/questionnaire.png"></image>
      <text class="survey-title">量表自测</text>
      <image class="survey-arrow" src="../../static/icons/right.png" />
    </view>

    <!-- 知识库分类 -->
    <view class="tabs">
      <view class="tab-item" :class="{ active: currentIndex === 0 }" @click="currentIndex = 0">
        推荐
      </view>
      <view class="tab-item" :class="{ active: currentIndex === 1 }" @click="currentIndex = 1">
        预防
      </view>
      <view class="tab-item" :class="{ active: currentIndex === 2 }" @click="currentIndex = 2">
        诊断
      </view>
      <view class="tab-item" :class="{ active: currentIndex === 3 }" @click="currentIndex = 3">
        治疗
      </view>
      <view class="tab-item" :class="{ active: currentIndex === 4 }" @click="currentIndex = 4">
        护理
      </view>
    </view>

    <!-- 知识库文章信息 -->
    <view class="swiper-container">
      <swiper class="recommend-swiper" :current="currentIndex" @change="onSwiperChange">
        <swiper-item v-for="(tab, index) in tabs" :key="index">
          <view class="recommend-list">
            <view
              class="recommend-item"
              v-for="item in articlesList[tab]"
              :key="item.id"
              @click="toArticle(item.id)"
            >
              <image class="item-image" :src="item.image" />
              <view class="item-text">
                <text class="item-title">{{ item.title }}</text>
                <view class="item-info">
                  <image
                    src="https://artist-eyes.obs.cn-south-1.myhuaweicloud.com/ppd/images/hospital.png"
                    class="hospital-avatar"
                  />
                  <text class="hospital-name">省胸科医院</text>
                  <text class="item-date">{{ item.date }}</text>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/store/user'
import { useRecordStore } from '@/store/record'
import { useArticleStore } from '@/store/article'
const recordStore = useRecordStore()
const records = computed(() => recordStore.records)

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const isLogined = computed(() => userStore.isLogined)

const articleStore = useArticleStore()
const tabs = computed(() => articleStore.tabs)
const articlesList = computed(() => articleStore.articlesList)

const searchQuery = ref('')
const currentIndex = ref(0) // Swiper 当前显示的索引

onMounted(() => {
  init()
})

const init = async () => {
  console.log('userInfo', userInfo.value)
  if (isLogined.value) {
    await recordStore.getRecords(userInfo.value.id)
    console.log('records', records.value)
  }
  articleStore.classyfyArticlesByType()
}

const toDetect = () => {
  uni.switchTab({
    url: '/pages/detect/detect',
  })
}

const toDRtect = () => {
  uni.showToast({
    title: '敬请期待',
    icon: 'none',
  })
}

const toLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}

const toMy = () => {
  uni.switchTab({
    url: '/pages/my/my',
  })
}

const toQuestionnaire = () => {
  uni.navigateTo({
    url: '/pages/questionnaire/questionnaire',
  })
}

const toArticle = (articleId: number) => {
  articleStore.setCurrentArticle(articleId)
  uni.navigateTo({
    url: '/pages/article/article',
  })
}

// Swiper 滑动处理函数
const onSwiperChange = (e: any) => {
  const index = e.detail.current
  currentIndex.value = index
}

const onSearch = () => {
  console.log('搜索内容:', searchQuery.value)
}
</script>

<style lang="scss">
.container {
  padding: 16px;
  padding-top: 30px;
  background: linear-gradient(180deg, rgba(215, 229, 247, 1) 0%, rgba(217, 234, 251, 0) 100%);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  margin-top: 20px;
}

.profile {
  display: flex;
  align-items: center;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .name {
    font-size: 18px;
    font-weight: bold;
  }
}

.icons {
  display: flex;
  .icon {
    width: 24px;
    height: 24px;
    margin-left: 16px;
    background-color: #ccc;
    border-radius: 50%;
  }
}

.search-bar {
  display: flex;
  margin-bottom: 16px;
  height: 40px;
  .search-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 20px;
    margin-top: 7px;
    margin-left: 5px;
  }
  .search-input {
    height: 40px;
    flex: 1;
    padding: 8px 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 1);
    border: 0.5px solid rgba(0, 117, 254, 1);
  }
  .search-button {
    position: absolute;
    height: 40px;
    line-height: 40px;
    color: #007aff;
    background: none;
    right: 15px;
    font-size: 16px;
    font-weight: bold;
  }
}

.quick-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  .action-item {
    display: flex;
    align-items: center;
    height: 75px;
    width: 48%;
    padding: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(0, 117, 254, 1) 0%, rgba(79, 158, 255, 1) 100%);
    border: 0.5px solid rgba(255, 255, 255, 1);
    .action-icon {
      width: 40px;
      height: 40px;
    }
    .action-info {
      display: flex;
      flex-direction: column;
      margin-left: 7px;
      color: #fff;
      .action-label {
        font-size: 14px;
      }
      .action-desc {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
}

.hospital-info {
  display: flex;
  margin-bottom: 16px;
  height: 130px;
  padding: 15px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(215, 232, 252, 1) 0%,
    rgba(255, 255, 255, 0.75) 32.75%,
    rgba(255, 255, 255, 1) 100%
  );
  .hospital-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    .hospital-title {
      margin-top: 2px;
      font-size: 16px;
      font-weight: bold;
    }
    .hospital-description {
      margin-top: 8px;
      font-size: 12px;
      color: #888;
    }
  }
  .hospital-image {
    width: 152px;
    height: 106px;
    margin-left: 10px;
    border-radius: 12px;
  }
}

.survey-section {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  .survey-icon {
    width: 30px;
    height: 30px;
    margin-left: 8px;
  }
  .survey-title {
    font-size: 16px;
    font-weight: bold;
    width: 75%;
  }
  .survey-arrow {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 16px;
  align-items: baseline;
  .tab-item {
    flex: 1;
    text-align: left;
    font-size: 15px;
    color: #888;
    &.active {
      color: #0075fe;
      font-weight: bold;
      font-size: 18px;
    }
  }
}

.swiper-container {
  height: 500px;
}

.recommend-swiper {
  height: 100%;
}

.recommend-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  .recommend-item {
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: #fff;
    overflow: hidden;
    .item-image {
      width: 100%;
      height: 120px;
    }
    .item-text {
      padding: 8px;
      .item-title {
        font-size: 14px;
      }
      .item-info {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .hospital-avatar {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .hospital-name {
          width: 50%;
          font-size: 12px;
          line-height: 20px;
        }
        .item-date {
          font-size: 10px;
          color: #888;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
